<template>
    <div class="dashboard">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="card">
          <div class="card-header">
            <div class="card-icon bg-blue">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z" />
              </svg>
            </div>
            <div class="card-content">
              <p class="card-label">总用户数</p>
              <p class="card-value">8,924</p>
              <p class="card-change positive">↑ 12.5% 较上月</p>
            </div>
          </div>
        </div>
        
        <div class="card">
          <div class="card-header">
            <div class="card-icon bg-green">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path d="M10.464 8.746c.227-.18.497-.311.786-.394v2.795a2.252 2.252 0 01-.786-.393c-.394-.313-.546-.681-.546-1.004 0-.323.152-.691.546-1.004zM12.75 15.662v-2.824c.347.085.664.228.921.421.427.32.579.686.579.991 0 .305-.152.671-.579.991a2.534 2.534 0 01-.921.42z" />
                <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 6a.75.75 0 00-1.5 0v.816a3.836 3.836 0 00-1.72.756c-.712.566-1.112 1.35-1.112 2.178 0 .829.4 1.612 1.113 2.178.502.4 1.102.647 1.719.756v2.978a2.536 2.536 0 01-.921-.421l-.879-.66a.75.75 0 00-.9 1.2l.879.66c.533.4 1.169.645 1.821.75V18a.75.75 0 001.5 0v-.81a4.124 4.124 0 001.821-.749c.745-.559 1.179-1.344 1.179-2.191 0-.847-.434-1.632-1.179-2.191a4.122 4.122 0 00-1.821-.75V8.354c.29.082.559.213.786.393l.415.33a.75.75 0 00.933-1.175l-.415-.33a3.836 3.836 0 00-1.719-.755V6z" clip-rule="evenodd" />
              </svg>
            </div>
            <div class="card-content">
              <p class="card-label">总销售额</p>
              <p class="card-value">¥ 1,248,560</p>
              <p class="card-change positive">↑ 8.3% 较上月</p>
            </div>
          </div>
        </div>
        
        <div class="card">
          <div class="card-header">
            <div class="card-icon bg-yellow">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path fill-rule="evenodd" d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z" clip-rule="evenodd" />
              </svg>
            </div>
            <div class="card-content">
              <p class="card-label">待处理事项</p>
              <p class="card-value">24</p>
              <p class="card-change negative">↑ 3 新待办</p>
            </div>
          </div>
        </div>
        
        <div class="card">
          <div class="card-header">
            <div class="card-icon bg-purple">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path fill-rule="evenodd" d="M12.516 2.17a.75.75 0 00-1.032 0 11.209 11.209 0 01-7.877 3.08.75.75 0 00-.722.515A12.74 12.74 0 002.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 00.374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 00-.722-.516l-.143.001c-2.996 0-5.717-1.17-7.734-3.08zm3.094 8.016a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
              </svg>
            </div>
            <div class="card-content">
              <p class="card-label">系统健康度</p>
              <p class="card-value">98.7%</p>
              <p class="card-change positive">运行正常</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
        <BarChart />
        <LineChart />
        <PieChart />
        <GaugeChart />
        <!-- <HeatMapChart /> -->
        <!-- <MapChart /> -->
        <ScatterChart />
        <RadarChart />
      </div>
    </div>
  </template>
  
  <script setup>
  import BarChart from '@/components/charts/BarChart.vue';
  import LineChart from '@/components/charts/LineChart.vue';
  import PieChart from '@/components/charts/PieChart.vue';
  import GaugeChart from '@/components/charts/GaugeChart.vue';
//   import HeatMapChart from '@/components/charts/HeatMapChart.vue';
//   import MapChart from '@/components/charts/MapChart.vue';
  import ScatterChart from '@/components/charts/ScatterChart.vue';
  import RadarChart from '@/components/charts/RadarChart.vue'; 
  </script>
  
  <style scoped>
  .dashboard {
    max-width: 1920px;
    margin: 0 auto;
    padding: 1rem;
  }
  
  .card-header {
    display: flex;
    align-items: center;
  }
  
  .card-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
  }
  
  .card-icon svg {
    width: 24px;
    height: 24px;
    fill: white;
  }
  
  .bg-blue {
    background-color: #3498db;
  }
  
  .bg-green {
    background-color: #2ecc71;
  }
  
  .bg-yellow {
    background-color: #f39c12;
  }
  
  .bg-purple {
    background-color: #9b59b6;
  }
  
  .card-content {
    flex: 1;
  }
  
  .card-label {
    color: #7f8c8d;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
  }
  
  .card-value {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
  }
  
  .card-change {
    font-size: 0.75rem;
  }
  
  .positive {
    color: #27ae60;
  }
  
  .negative {
    color: #e74c3c;
  }
  
  @media (max-width: 768px) {
    .grid-cols-1,
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
      grid-template-columns: 1fr;
    }
    
    .card-icon {
      width: 40px;
      height: 40px;
    }
    
    .card-icon svg {
      width: 20px;
      height: 20px;
    }
    
    .card-value {
      font-size: 1.25rem;
    }
  }
  </style>